<template>
	<view class="template-mine tn-safe-area-inset-bottom tn-cool-bg-color-userhead">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed backgroundColor="#342C67" fontColor="#fff">
			<!-- 充值{{configInfo.site_moneyname}} -->
			账户余额
		</tn-nav-bar>


		<view class=" tn-cool-bg-color-userhead"
			:style="{ padding: '0 40rpx', paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '56rpx' }">

			<view class="tn-cool-bg-color-6 tn-flex tn-flex-direction-column tn-flex-row-between infoBox">
				<!-- 更多信息-->
				<view class="moreInfo tn-flex tn-flex-col-center">
					<img style="width: 88rpx; height: 88rpx;" src="../../static/other/goldIcon2.png" alt="">

					<view class="tn-flex tn-flex-direction-column ">
						<!-- <view class="justify-content-item tn-margin " style="color: #dddddd;">
							全部{{ configInfo.site_moneyname }}</view> -->
						<tn-count-to :startVal="startVal" :bold="true" fontColor="#ffffff" fontUnit="rpx" :fontSize="36"
							:endVal="my_moneygou"></tn-count-to>
						<view @click="navigateToFn({ url: '/mineMixinPages/money_log', checkLogin: true })"
							style="font-size: 20rpx; color:#D8D8D8; margin-top: 4rpx;">
							金币明细 <text class="tn-icon-right"></text>
						</view>
					</view>

					<!-- <view class="tn-flex tn-flex-row-between tn-flex-col-center "
						style="width:100%;border-radius: 15rpx  15rpx  0rpx  0rpx;">
						<view class="justify-content-item tn-margin-left">
							<view class="tn-text-bold tn-padding-bottom-xs" style="font-size:80rpx;">
								<tn-count-to :startVal="startVal" :bold="true" fontColor="#ffffff" fontUnit="px"
									:fontSize="30" :endVal="my_moneygou"></tn-count-to>
							</view>
						</view>

					</view> -->
				</view>
				<view class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="tn-flex tn-flex-row-between" style="width: 100%;">
						<view class="tn-flex tn-flex-direction-column tn-flex-col-center">
							<view class="tn-text-bold" style="font-size:20rpx; color:#24D4D1">
								{{ freemoney }}
							</view>
							<view class="" style="color: #fff;font-size:20rpx;">
								免费获得
							</view>
						</view>
						<div class="line" style="height:50rpx; width:2rpx; background:#fff"></div>
						<view class="tn-flex tn-flex-direction-column tn-flex-col-center">
							<view class="tn-text-bold" style="font-size:20rpx; color:#24D4D1">
								{{ freebuy }}
							</view>
							<view class="" style="color: #fff;font-size:20rpx;">
								付费充值
							</view>

						</view>
						<div class="line" style="height:50rpx; width:2rpx; background:#fff"></div>
						<view class="tn-flex tn-flex-direction-column tn-flex-col-center"
							@click="navigateToFn({ url: '/mineMixinPages/money_log', checkLogin: true })">
							<view class="tn-text-bold" style="font-size:20rpx; color:#24D4D1">
								{{ mygiftmoey }}
							</view>
							<view class="" style="color: #fff;font-size:20rpx;">
								金币收益
							</view>
						</view>
					</view>
					<view>
						<view class="text look">
							<ad-rewarded-video :adpid="up_jili_app" :loadnext="true" v-slot:default="{ loading, error }"
								@load="onadload" @close="onadclose" @error="onaderror">
								<tn-button :shadow="true" width="100%" height="100%" backgroundColor="transparent"
									fontColor="#fff" style="font-weight: bold;">看广告赚金币</tn-button>
								<view v-if="error">{{ error }}</view>
							</ad-rewarded-video>
						</view>
					</view>
				</view>
			</view>



			<!-- #ifdef APP -->
			<view class="text">
				<ad-rewarded-video :adpid="up_jili_app" :loadnext="true" v-slot:default="{ loading, error }"
					@load="onadload" @close="onadclose" @error="onaderror">
					<tn-button :shadow="true" shape="round" width="100%" height="80rpx" backgroundColor="#dddddd"
						fontColor="#303030" margin="10rpx 0">看广告赚{{ configInfo.site_moneyname }}{{ jilimoney
						}}个</tn-button>
					<view v-if="error">{{ error }}</view>
				</ad-rewarded-video>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<view class="text" v-if="up_jili_xcx">
				<tn-button :shadow="true" shape="round" width="100%" height="80rpx" backgroundColor="#dddddd"
					fontColor="#303030" margin="10rpx 0" @click="openVideoAd">看广告赚{{ configInfo.site_moneyname }}{{
						jilimoney }}个</tn-button>
			</view>
			<!-- #endif -->

			<view class="tn-search-fixed" v-if="chongzhika">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
					<view class="justify-content-item align-content-item">
						<view class="tn-bg-gray--light tn-flex tn-flex-col-center"
							style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 100%;">
							<text
								class="tn-icon-pay justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
							<input class="justify-content-item" placeholder="输入充值卡号" v-model="kano"
								placeholder-style="color:#AAAAAA"></input>
						</view>
					</view>

					<view class="align-content-item">
						<view class="justify-content-item tn-text-center" @click="chongzhipass()">
							<tn-button fontColor="#000000" :shadow="true"
								backgroundColor="tn-main-gradient-yellow--reverse" shape="round" padding="20rpx 20rpx"
								width="150rpx" shadow fontBold>
								<text>充值</text>
							</tn-button>

						</view>
					</view>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold"
					style="font-size: 36rpx; color:#fff; margin-top:40rpx; margin-bottom: 20rpx;">金币用途</view>
			</view>

			<tn-scroll-list :indicator="false" style="padding-bottom: 0;">

				<view class="tn-flex" style="width:100%; height:182rpx; ">
					<view class="tn-flex-1 jointly">
						<img src="../../static/other/knowIcon.png" alt="">
						<p>申请认识</p>
					</view>
					<view class="tn-flex-1 jointly">
						<img src="../../static/other/lookIcon.png" alt="">
						<p>解锁访客</p>
					</view>
					<view class="tn-flex-1 jointly">
						<img src="../../static/other/treeIcon.png" alt="">
						<p>解锁树洞</p>
					</view>
					<view class="tn-flex-1 jointly">
						<img src="../../static/other/openVipIcon.png" alt="">
						<p>开通VIP</p>
					</view>
					<view class="tn-flex-1 jointly">
						<img src="../../static/other/showIcon.png" alt="">
						<p>个性装扮</p>
					</view>
					<!-- <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="tn-flex tn-flex-row-center tn-flex-col-center">
								<view class="tn-icon-my tn-three tn-color-bluepurple" style="font-size: 58rpx;"></view>
							</view>
							<view class="tn-color-black tn-text-center tn-margin-top-sm">
								<text class="tn-text-ellipsis">解锁匿名</text>
							</view>
						</view>
					</view>
					<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view class="tn-flex tn-flex-row-center tn-flex-col-center">
								<view class="tn-icon-message tn-three tn-color-bluepurple" style="font-size: 58rpx;">
								</view>
							</view>
							<view class="tn-color-black tn-text-center tn-margin-top-sm">
								<text class="tn-text-ellipsis">购买纸条</text>
							</view>
						</view>
					</view> -->


				</view>

			</tn-scroll-list>
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold"
					style="font-size: 36rpx; color:#fff; margin-top:40rpx; margin-bottom: 20rpx;">金币充值</view>
			</view>
			<view class="about-shadow">
				<!-- 更多信息-->
				<view class="about-shadow">


					<!-- <view class="tn-flex tn-flex-row-between">
						<view class="justify-content-item tn-margin tn-text-bold">充值{{ configInfo.site_moneyname }}
						</view>

					</view> -->

					<scroll-view v-if="tuniaoData.length > 0" scroll-x="true"
						style="width: 100%;display: flex;flex-direction: row;white-space: nowrap;">
						<view style="margin-bottom: 20rpx;">
							<view @click="btnMumberType(index, item)" v-for="(item, index) in tuniaoData" :key='index'
								:class="currects == index ? 'active payItem' : 'payItem'" style="overflow: hidden;display: inline-block;
		               border-radius: 10rpx;margin: 0 10rpx;background-repeat:repeat;background-size: cover;">

								<view class="tag"
									style="width:120rpx;height: 30rpx;position: absolute;top:0;right:0;font-size: 24rpx;color: #ffffff;text-align: center;">
									加送{{ Number(item.song_money).toFixed(0) }}
								</view>
								<view
									style="height: 100%;display: flex;flex-direction: column;align-items: center;  justify-content: center;">
									<view style="color:#fff;"><text style="font-size:36rpx;">
											{{ Number(item.xuni_money).toFixed(0) }}金币</text>
									</view>
									<view style="color:#fff;font-size: 24rpx;">
										￥{{ Number(item.money).toFixed(0) }}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>


					<view class="tn-text-center nowPay" @click="chongzhi()">
						{{ `确认支付（¥${Number(moneyItem).toFixed(0)}）` }}
					</view>

				</view>
			</view>



			<view class="about-shadow2" @click="navigateToFn({ url: '/mineMixinPages/share', checkLogin: true })">
				<!-- 更多信息-->
				<view class="about-img">
					<img src="../../static/other/balance2.png" alt="">
					<view class="tn-flex tn-flex-row-between tn-flex-col-center" style="width: 100%;">
						<view class="justify-content-item tn-flex tn-flex-direction-column">
							<text style="font-size: 36rpx;font-weight: bold;">邀请好友拿金币</text>
							<text style="font-size: 16rpx;">邀请好友注册即可获得金币</text>
							<!-- <text style="color: #ffaa00;margin-left: 18rpx;font-size: 12px;">+{{ yaoqingmoney }}{{
								configInfo.site_moneyname }}/人</text> -->
						</view>
						<view class="now">
							立即邀请
						</view>
					</view>
				</view>
			</view>


			<view class="about-like"> <!-- 更多信息-->
				<text class="aboutMe">心动账户</text>
				<view class="tn-flex tn-flex-row-between tn-flex-col-bottom">
					<view class="tn-flex tn-flex-row-between tn-flex-col-center">
						<img class="likeIcon" src="../../static/other/likeIcon.png" alt="">
						<view class="">
							<view style="color: #fff; font-size: 20rpx; margin-bottom: 10rpx;">
								剩余可用次数</view>
							<text style="color: #fff; font-size: 36rpx;">{{ my_moneynum }}</text>
						</view>
					</view>
					<view style="margin-bottom: 20rpx;"
						@click="navigateToFn({ url: '/mineMixinPages/qiandao', checkLogin: true })">
						<tn-tag shape="circle"
						style="background: transparent; border: 1px solid #FFFFFF; color:#fff; font-size: 36rpx;"
							width="230rpx" height="64rpx">
							签到领取
						</tn-tag>
					</view>
				</view>
			</view>




		</view>


		<tn-modal width="80%" v-model="show_shenqing" backgroundColor="#E4E9EC" padding="30rpx 80rpx" :radius="25"
			:showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="custom">

			<view class="custom-modal-content tn-text-xxl">
				{{ chongzhtitle }}
			</view>

			<view class="tn-flex">
				<view class="tn-flex-1">
					<!-- #ifdef APP-PLUS -->
					<view class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;" @click="post('wxpay')"
						v-if="configInfo.pay_yingyong_wx">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-wechat-fill tn-color-green" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">微信支付

							</view>
						</view>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP -->
					<view class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;" @click="post('wxpay')"
						v-if="configInfo.shanghu_xcx">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-wechat-fill tn-color-green" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">微信支付

							</view>
						</view>
					</view>
					<!-- #endif -->

					<!-- #ifdef H5 -->
					<view class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;" @click="post('wxpay')"
						v-if="configInfo.shanghu_wxchat">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-wechat-fill tn-color-green" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">微信支付

							</view>
						</view>
					</view>
					<!-- #endif -->


					<!-- #ifdef APP-PLUS -->
					<view class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;margin-top: 10px;"
						@click="post('alipay')" v-if="configInfo.pay_yingyong_ali">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-alipay tn-color-blue" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">支付宝支付

							</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class=" tn-radius tn-bg-gray--light" style="padding:10px 25px;margin-top: 10px;"
						@click="iphonepay()" v-if="iPhone">
						<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
							<view class="justify-content-item  tn-text-center">
								<text class="tn-icon-ap tn-color-blue" style="font-size:26px;"></text>
							</view>
							<view class="justify-content-item  tn-text-center  tn-radius"
								style="font-size: 18px;color: #000;margin-left: 8px;">苹果支付
							</view>
						</view>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</tn-modal>



	</view>
</template>

<script>
let videoAd = null;
import { host } from "@/siteinfo.js";
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
export default {
  name: "TemplateCreate",
  mixins: [template_page_mixin],
  data() {
    return {
      mygiftmoey: 0,
      yaoqingmoney: 0,
      startVal: 0,
      freebuy: 0,
      my_moneygou: 0,
      freemoney: 0,
      freexidong: 0,
      currects: 0,
      iPhone: false,
      isLoading: false,
      huanjifen: "",
      shezhishow: false,
      kano: "",
      id: 0,
      my_moneynum: 0,
      my_scorenum: 0,
      custom: false,
      chongzhtitle: "",
      show_shenqing: false,
      tuniaoData: [],
      up_jili_app: "",
      up_jili_xcx: "",
      chongzhika: "",
      jilimoney: 0,
      _isLoaded: false,
      _rewardedVideoAd: "",
      moneyItem: 0,
    };
  },
  onLoad(option) {
    let that = this;
    let platform = uni.getSystemInfoSync().platform;
    if (platform === "ios") {
      this.iPhone = true;
    }
    that.action = host + "/chat/user/up_img";
    that.info();
    that.info3();
    that.info2();
    uni.$once("qiandaook", (data) => {
      that.info();
      that.info3();
      that.info2();
    });
  },

  methods: {
    btnMumberType(e) {
      this.currects = e;
      this.id = this.tuniaoData[e].id;
      this.moneyItem = this.tuniaoData[e].money;
    },
    onadload(e) {
      console.log("广告数据加载成功");
    },
    onadclose(e) {
      const detail = e.detail;
      // 用户点击了【关闭广告】按钮
      if (detail && detail.isEnded) {
        // 正常播放结束
        this.adpassok();
        console.log("onadclose " + detail.isEnded);
      } else {
        // 播放中途退出
        this.msg("中途退出，不计算奖励");
        console.log("onadclose " + detail.isEnded);
      }
    },
    onaderror(e) {
      // 广告加载失败
      console.log("onaderror: ", e.detail);
    },

    async info2() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/gift/chongzhijili",
        data: {},
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.up_jili_app = result.data.data.up_jili_app;
          that.up_jili_xcx = result.data.data.up_jili_xcx;
          that.chongzhika = result.data.data.chongzhika;
          that.jilimoney = result.data.data.jilimoney;

          if (that.up_jili_xcx) {
            // #ifdef MP
            this.adLoad();
            // #endif
          }
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async info3() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/User/index",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.freemoney = result.data.data.userinfo.freemoney;
          that.buymoney = result.data.data.userinfo.buymoney;
          that.yaoqingmoney = result.data.data.userinfo.yaoqingmoney;
          that.freexidong = result.data.data.userinfo.freexidong;
          that.my_moneynum = result.data.data.userinfo.loveheart_num;
          that.my_moneygou = result.data.data.userinfo.money;
          that.my_scorenum = result.data.data.userinfo.integral;
          that.mygiftmoey = result.data.data.userinfo.gift_money;
          that.$store.commit("setmoney", that.my_moneygou);
          that.$store.commit("setsore", that.my_scorenum);
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async info() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/gift/chongzhilist",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.tuniaoData = result.data.data;
          that.id = that.tuniaoData[0].id;
          this.moneyItem = this.tuniaoData[0].money;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async scorepass() {
      let that = this;

      if (!this.huanjifen) {
        this.msg("请输入兑换数量");
        return;
      }

      if (this.huanjifen > this.my_scorenum) {
        this.msg("你的积分不足");
        return;
      }

      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/four/scorepass",
        data: {
          jifen: this.huanjifen,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.shezhishow = false;
          that.info3();
          that.msg("兑换成功");
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    adLoad: function () {
      if (wx.createRewardedVideoAd) {
        videoAd = wx.createRewardedVideoAd({
          adUnitId: this.up_jili_xcx, //你的广告key
        });
        videoAd.onError((err) => {});
        videoAd.onClose((status) => {
          if ((status && status.isEnded) || status === undefined) {
            this.adpassok();

            console.log("主动看完");
          } else {
            this.msg("中途退出，无法获得奖励");
            console.log("中途退出");
          }
        });
      }
    },
    async adpassok() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/four/admoneypass",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          uni.showModal({
            title: "提示",
            content: "广告播放完毕，获得奖励",
          });

          this.info3();
        } else {
          uni.showModal({
            title: "提示",
            content: result.data.msg,
          });
        }
      }
    },

    openVideoAd: function () {
      if (videoAd) {
        videoAd.show().catch((err) => {
          videoAd.load().then(() => videoAd.show());
        });
      }
    },
    adClick() {
      if (this._isLoaded) {
        this._rewardedVideoAd.show();
      }
    },

    async chongzhipass() {
      let that = this;
      if (!this.kano) {
        this.msg("请输入卡号");
        return;
      }
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/four/chongzhika",
        data: {
          kano: this.kano,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.info3();
          that.msg("充值成功");
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    async post(payType) {
      let that = this;

      // #ifdef APP
      if (payType == "alipay") {
        var url = "/chat/Payment/alipay_chong";
      } else {
        var url = "/chat/Payment/wxpay_chong";
      }

      let result = await that.$request({
        loading: 1,
        method: "post",
        url: url,
        data: {
          id: this.id,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          uni.requestPayment({
            provider: payType,
            orderInfo: result.data.data, //支付宝订单数据
            success: function (res) {
              if (res.errMsg == "requestPayment:ok") {
                that.custom = false;
                that.show_shenqing = false;
                that.info3();
                that.msg("充值成功");

                //uni.navigateBack()
              } else {
                console.log("fail:" + JSON.stringify(res));
              }
            },
            fail: function (err) {
              console.log(err);
            },
          });
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }

      // #endif

      // #ifdef MP-WEIXIN
      //微信小程序

      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/Payment/wxpay_chong_xcx",
        data: {
          id: this.id,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          let paycanshu = JSON.parse(result.data.data.pay);
          console.log(paycanshu.timeStamp, 111111);

          uni.requestPayment({
            provider: "wxpay",
            timeStamp: paycanshu.timeStamp,
            nonceStr: paycanshu.nonceStr,
            package: paycanshu.package,
            signType: "MD5",
            paySign: paycanshu.paySign,
            success: function (res) {
              that.custom = false;
              that.show_shenqing = false;
              that.info3();
              that.msg("充值成功");
            },
          });
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }

      // #endif

      // #ifdef H5
      //微信公众号

      let ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/micromessenger/i) == "micromessenger") {
      } else {
        this.msg(
          "请到微信里打开才能支付！复制网址到微信访问吧" +
            ua.match(/micromessenger/i)
        );
        return;
      }

      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/Payment/wxpay_chong_h5",
        data: {
          id: this.id,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          let paycanshu = result.data.data;

          //、、、、、
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: paycanshu.appId, //公众号名称，由商户传入
              timeStamp: paycanshu.timeStamp, //时间戳
              nonceStr: paycanshu.nonceStr, //随机串
              package: paycanshu.package,
              signType: paycanshu.signType, //微信签名方式：
              paySign: paycanshu.paySign, //微信签名
            },
            function (ress) {
              if (ress.err_msg == "get_brand_wcpay_request:ok") {
                that.custom = false;
                that.show_shenqing = false;
                that.info3();
                that.msg("充值成功");
              } else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
                uni.showToast({
                  icon: "none",
                  title: "'已取消支付",
                });
              } else {
                uni.showToast({
                  icon: "none",
                  title: "支付失败",
                });
              }
            }
          );
          //、、、
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }

      // #endif
    },

    chongzhi() {
      this.id = this.tuniaoData[this.currects].id;
      this.custom = true;
      this.chongzhtitle = "充值金额为￥" + this.tuniaoData[this.currects].money;
      this.show_shenqing = true;
    },
    Load: function () {
      if (wx.createRewardedVideoAd) {
        videoAd = wx.createRewardedVideoAd({
          adUnitId: this.up_jili_xcx, //你的广告key
        });
        videoAd.onError((err) => {});
        videoAd.onClose((status) => {
          if ((status && status.isEnded) || status === undefined) {
            //这里写广告播放完成后的事件
          } else {
          }
        });
      }
    },
    openVideoAd: function () {
      if (videoAd) {
        videoAd.show().catch((err) => {
          videoAd.load().then(() => videoAd.show());
        });
      }
    },
    adClick() {
      if (this._isLoaded) {
        this._rewardedVideoAd.show();
      }
    },

    async iphonepay() {
      console.log(3333);
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/chat/Payment/iphonepay",
        data: {
          id: this.id,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          uni.requestPayment({
            provider: "appleiap",
            orderInfo: {
              productid: result.data.data.pid,
            },
            success: (e) => {
              that.$request({
                loading: 1,
                method: "post",
                url: "/chat/Payment/iphonepay_back",
                data: {
                  id: result.data.data.oid,
                  trade_status: "TRADE_SUCCESS",
                },
              });
              console.log(JSON.stringify(e));
              that.custom = false;
              that.show_shenqing = false;
              that.info3();
              that.msg("充值成功");
            },
            fail: (e) => {
              uni.showModal({
                content: "支付失败,原因为: " + e.errMsg,
                showCancel: false,
              });
            },
            complete: () => {
              console.log("payment结束");
            },
          });
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.template-mine {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(0deg, #39308d 0%, #342c67 100%);
}

.infoBox {
  height: 284rpx;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
  border-radius: 10rpx;
  padding: 40rpx 20rpx 20rpx 40rpx;
}

.moreInfo {
  height: 88rpx;
  border-radius: 10rpx;

  img {
    margin-right: 20rpx;
  }
}

.look {
  width: 234rpx;
  height: 64rpx;
  background: linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 32rpx;
  margin-left: 54rpx;
}

.jointly {
  margin-right: 10rpx;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40rpx;
  padding-top: 20rpx;

  ::v-deep p {
    color: #fff;
    font-size: 24rpx;
    margin-top: 20rpx;
  }

  &:nth-child(1) img {
    width: 68rpx;
    height: 68rpx;
  }

  &:nth-child(2) {
    padding-top: 30rpx;

    img {
      width: 64rpx;
      height: 48rpx;
    }
  }

  &:nth-child(3) img {
    width: 68rpx;
    height: 68rpx;
  }

  &:nth-child(4) img {
    width: 64rpx;
    height: 64rpx;
  }

  &:nth-child(5) img {
    width: 68rpx;
    height: 68rpx;
  }
}

/* 用户头像 start */
.nav-link {
  font-size: 32rpx;
  text-transform: capitalize;
  padding: 0 0 10rpx 0;
  position: relative;

  .title {
    color: #ffffff;
    margin-top: 100rpx;
    text-align: center;
  }

  .join {
    color: #ffffff;
    margin-top: 20rpx;
    margin-bottom: 40rpx;
    text-align: center;
  }
}

.logo-image {
  width: 210rpx;
  height: 210rpx;
  position: relative;
}

.jinbi {
  background-image: url(@/static/bi.png);
  width: 330px;
  height: 100%;
  background-size: cover;
  border-radius: 7px;
}

.about-shadow2 {
  height: 106rpx;
  background: linear-gradient(
    180deg,
    rgba(250, 81, 81, 0.3) 0%,
    rgba(255, 195, 0, 0.3) 100%
  );
  border-radius: 53rpx;
  box-sizing: border-box;
  border: 1px solid transparent;
  background-image: linear-gradient(#703a6e, #70565c),
    linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
  color: #fff;
  margin-bottom: 40rpx;

  .about-img {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 168rpx;
    padding-right: 24rpx;

    img {
      width: 122rpx;
      height: 122rpx;
      position: absolute;
      left: 20rpx;
      bottom: 0;
    }

    .now {
      width: 162rpx;
      height: 60rpx;
      font-size: 28rpx;
      font-weight: bold;
      background: linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
      border-radius: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.about-like {
  width: 100%;
  height: 206rpx;
  border-radius: 20px;
  background: linear-gradient(270deg, #ff6cce 0%, #f9a1ba 100%);
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
  padding: 8rpx 20rpx 0 40rpx;
  .aboutMe {
    font-size: 36rpx;
    font-weight: 500;
    color: #fff;
  }
  .likeIcon {
    width: 148rpx;
    height: 148rpx;
    margin-right: 20rpx;
  }
}

/* 页面 start*/
.about-shadow {
  margin-bottom: 40rpx;

  .nowPay {
    width: 100%;
    height: 72rpx;
    background: linear-gradient(
      180deg,
      rgba(65, 133, 255, 0.8) 0%,
      rgba(85, 223, 252, 0.8) 100%
    );
    border-radius: 36rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    line-height: 72rpx;
  }
}

.payItem {
  width: 200rpx;
  height: 196rpx;
  border-radius: 10rpx;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;

  .tag {
    border-radius: 0px 10rpx 0px 10rpx;
    background: linear-gradient(
      180deg,
      rgba(65, 133, 255, 0.8) 0%,
      rgba(85, 223, 252, 0.8) 100%
    );
  }
}

.active {
  background: linear-gradient(
    90deg,
    rgba(127, 80, 254, 0.3) 0%,
    rgba(255, 174, 248, 0.3) 67%,
    rgba(213, 183, 248, 0.3) 100%
  );
  border: 1px solid transparent;

  background-image: linear-gradient(90deg, #4c38a0, #684d9d, #66559f),
    // 跟背景色保持一致，根据实际情况修改
    linear-gradient(0deg, #895afe 0%, #fa87c2 100%);

  background-origin: border-box;
  background-clip: content-box, border-box;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border: 8rpx solid rgba(255, 255, 255, 0.05);
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}

.bg-flex-shadow {
  background-color: #00c3ff;
  z-index: 9999;
}

/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #ffffff;
  }
}

/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}

.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
}

/* 底部悬浮按钮 end*/

/* 标签内容 start*/
.tn-tag-content {
  &__item {
    display: inline-block;
    line-height: 45rpx;
    padding: 10rpx 30rpx;
    margin: 20rpx 20rpx 5rpx 0rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}

.tn-shadow-blurddd {
  border: 2px solid black;
}

.icon20 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 130rpx;
      height: 130rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
      }
    }
  }
}

/* 标签内容 end*/

/* 业务展示 start */
.tn-info {
  &__container {
    margin-top: 10rpx;
    margin-bottom: 50rpx;
  }

  &__item {
    width: 47.7%;
    margin: 15rpx 0rpx 30rpx 0rpx;
    padding: 40rpx 30rpx;
    border-radius: 10rpx;

    position: relative;
    z-index: 1;

    &::after {
      content: " ";
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      border-radius: inherit;
      opacity: 1;
      transform: scale(1, 1);
      background-size: 100% 100%;
    }

    &__left {
      &--icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        font-size: 40rpx;
        margin-right: 20rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
        }
      }

      &__content {
        font-size: 25rpx;

        &--data {
          color: rgba(255, 255, 255, 0.5);
          margin-top: 5rpx;
          // font-weight: bold;
        }
      }
    }

    &__right {
      &--icon {
        position: absolute;
        right: 0rpx;
        top: 50rpx;
        font-size: 100rpx;
        width: 108rpx;
        height: 108rpx;
        text-align: center;
        line-height: 60rpx;
        opacity: 0.15;
      }
    }

    &__bottom {
      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
      border-radius: 0 0 10rpx 10rpx;
      position: absolute;
      width: 85%;
      line-height: 15rpx;
      left: 50%;
      bottom: -15rpx;
      transform: translateX(-50%);
      z-index: -1;
      text-align: center;
    }
  }
}

/* 业务展示 end */

/* 组件导航列表 start*/
.nav-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0rpx 0rpx 0rpx;
  justify-content: space-between;

  /* 列表元素 start */
  .nav-list-item {
    padding: 55rpx 30rpx 5rpx 30rpx;
    border-radius: 12rpx;
    width: 48%;
    margin: 0 5rpx 40rpx 0px;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 99;

    /* 元素标题 start */
    .nav-link {
      font-size: 32rpx;
      text-transform: capitalize;
      padding: 0 0 10rpx 0;
      position: relative;

      .title {
        color: #ffffff;
        margin-top: 100rpx;
        text-align: center;
      }

      .join {
        color: #ffffff;
        margin-top: 20rpx;
        margin-bottom: 40rpx;
        text-align: center;
      }
    }

    /* 元素标题 end */

    /* 元素图标 start */
    .icon {
      font-variant: small-caps;
      position: absolute;
      top: 60rpx;
      right: 50rpx;
      left: 0%;
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      margin: 0;
      padding: 0;
      display: inline-flex;
      text-align: center;
      justify-content: center;
      vertical-align: middle;
      font-size: 50rpx;
      color: #ffffff;
      white-space: nowrap;
      opacity: 0.9;

      background-size: cover;
      background-position: 50%;
    }

    /* 元素图标 end */
  }

  /* 列表元素 end */
}

.custom-modal-content {
  width: 100%;
  height: 100%;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .icon {
    font-size: 100rpx;
    margin-bottom: 20rpx;
    color: $tn-main-color;
  }

  .text {
    font-size: 40rpx;
  }
}

/* 组件导航列表 end*/
</style>